<template>
  <a-modal
    :visible="visible"
    title="添加文件夹"
    @cancel="cancelClick"
    :footer="null"
    :zIndex="1010"
  >
    <a-form layout="vertical">
      <a-form-item label="项目名称" v-if="current_name !== 'null'">
        <a-input v-model:value="current_name" disabled />
      </a-form-item>

      <a-form-item label="类型" v-bind="validateInfos.folder_type">
        <a-select
          v-model:value="modelRef.folder_type"
          :options="typesOfOptionsVI"
          placeholder="请选择文件夹类型"
          :disabled="defaultData.isDisable"
        ></a-select>
      </a-form-item>
      <a-form-item label="名称" v-bind="validateInfos.folder_name">
        <a-input
          v-model:value="modelRef.folder_name"
          placeholder="请输入文件夹名称"
          :maxlength="15"
        />
      </a-form-item>
      <!-- v-if="!merchantCanView && isShow" -->
      <a-form-item
        v-show="false"
        label="文件夹项目可见"
        v-bind="validateInfos.merchant_can_view"
      >
        <a-radio-group
          v-model:value="modelRef.merchant_can_view"
          name="radioGroup"
          :disabled="
            modelRef.folder_type == 'audio' || modelRef.folder_type == 'text'
          "
        >
          <a-radio value="1">可见</a-radio>
          <a-radio value="0">不可见</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <div class="footer">
      <a-space>
        <a-button
          ghost
          type="primary"
          style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
          @click="cancelClick"
          >取消</a-button
        >
        <a-button
          type="primary"
          class="submit-file"
          @click="handleOk"
          :loading="loading"
          >确定</a-button
        >
      </a-space>
    </div>
  </a-modal>
</template>

<script>
import {
  reactive,
  toRefs,
  watch,
  defineComponent,
  ref,
  createVNode,
  computed,
  onMounted,
} from "vue";
import request from "../../../../common/utils/request";
import { Form, message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";

const useForm = Form.useForm;

export default defineComponent({
  props: {
    is_merchant_library: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    material_type: {
      type: String,
      default: "",
    },
    groupData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    merchantCanView: {
      type: Boolean,
      default: false,
    },
    isFlaking: {
      type: Boolean,
      default: false,
    },
    current_name: {
      type: String,
      default: "",
    },
    /**
     * type:默认选择的类型
     * isDisable:是否禁止更改
     */
    defaultData: {
      type: Object,
      default: () => {
        return {
          type: "",
          isDisable: false,
        };
      },
    },

    menuList: {
      type: Array,
      default: () => {
        return [];
      },
    },

    checkedSelectType: {
      type: String,
      default: "",
    },
  },
  components: {},
  setup(props, { emit }) {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      count: 0,
      loading: false,
    });


    const typesOfOptionsVI = computed(() => {
      if (props.checkedSelectType == "video") {
        return [
          {
            value: "video",
            label: "视频",
          },
        ];
      } else if (props.checkedSelectType == "audio") {
        return [
          {
            value: "audio",
            label: "音频",
          },
        ];
      } else if (props.checkedSelectType == "image") {
        return [
          {
            value: "image",
            label: "图片",
          },
        ];
      } else if (props.checkedSelectType == "video_image") {
        return [
          {
            value: "video",
            label: "视频",
          },
          {
            value: "image",
            label: "图片",
          },
        ];
      } else if (props.checkedSelectType == "ALL_type") {
        return [
          {
            value: "image",
            label: "图片",
          },
          {
            value: "video",
            label: "视频",
          },

          {
            value: "audio",
            label: "音频",
          }
        ];
      }
    });

    const modelRef = reactive({
      folder_name: "",
      folder_type: undefined,
      merchant_can_view: "1",
    });
    const rulesRef = reactive({
      folder_name: [
        {
          required: true,
          message: "请输入文件夹名称",
        },
        {
          max: 15,
          message: "文件夹名称不能超过15个字符",
        },
      ],
      folder_type: [
        {
          required: true,
          message: "请选择文件夹类型",
        },
      ],
      merchant_can_view: [
        {
          required: true,
          message: "请选择",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    // 如果传递了默认视频类型, 则禁用并且初始赋值
    watch(
      () => props.visible,
      (val) => {
        if (val && props.defaultData.type) {
          modelRef.folder_type = props.defaultData.type;
        }
      }
    );

    watch(
      () => props.material_type,
      (val) => {
        modelRef.folder_type = props.material_type;
      },
      { immediate: true }
    );
    watch(
      () => modelRef.folder_type,
      (val) => {
        if (val == "audio" || val == "text") {
          modelRef.merchant_can_view = "0";
        } else {
          modelRef.merchant_can_view = "1";
        }
      }
    );

    // 确定提交按钮
    const handleOk = () => {
      validate().then(() => {
        state.loading = true;
        modelRef.folder_use_type = route.name == "ComposeMaterial" ? 2 : 1;
        modelRef.merchant_library_id =
          route.name == "ComposeMaterial" || route.name === "MixedCutPreview"
            ? props.groupData.id
            : props.groupData.merchant_library_id;
        modelRef.group_id =
          route.name == "ComposeMaterial" || route.name === "MixedCutPreview"
            ? props.groupData?.default_group_id
            : props.groupData.id;
        // 如果是确定的类型
        if (props.defaultData.type) {
          modelRef.folder_type = props.defaultData.type;
          modelRef.group_id = props.groupData.default_group_id;
          modelRef.merchant_library_id = props.groupData.merchant_library_id;
        }
        if (props.isFlaking == true) {
          modelRef.folder_use_type = 2;
        }

        if (route.name == 'VideoExtractAudioIndex' || route.name == 'VideoCroppingIndex' || route.name == 'VideoExtractionIndex') {
          modelRef.folder_use_type = 1;
        }

        if (props.is_merchant_library == "0") {
          modelRef.merchant_library_id = 0;
        }

        let obj = JSON.parse(JSON.stringify(modelRef));

        if (obj.folder_type == "视频") {
          obj.folder_type = "video";
        }

        if (obj.folder_type == "音频") {
          obj.folder_type = "audio";
        }

        request
          .post("/work_ai", "/user/shotstack/folder", obj)
          .then((res) => {
            message.success("创建成功");
            resetFields();
            let modelRefData = {
              merchant_library_id: modelRef.merchant_library_id,
              group_id: modelRef.group_id,
            };
            emit("onSubmit", modelRefData);
            state.loading = false;
          })
          .finally(() => {
            state.loading = false;
          });
      });
    };

    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };
    const isShow = computed(() => {
      return !route.path.includes("socialMedia");
    });
    return {
      ...toRefs(state),
      handleOk,
      cancelClick,
      validateInfos,
      modelRef,
      resetFields,
      isShow,
      typesOfOptionsVI,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 20px;

  .submit-file {
    background: var(--ss-primary-color);
    border: none;
    border-radius: 5px;
  }
}
</style>
